<template>
    <div class="sidebar">
        <div class="mid_title">
            <p class="greed">您好 !</p>
            <h2 class="name">456123789</h2>
            <p>
                <span>五级代理</span>
            </p>
            <span class="certify">已实名</span>
            <p>60.00￥/月</p>
            <p>20.00￥/周</p>
            <p>4.00￥/日</p>
        </div>
        <ul class="ul" @click="changeclass()">
            <router-link to="/" class="router-link-active">
                <li class="li ">
                    <i class="ivu-icon ivu-icon-home"></i>
                    <span>首页</span>
                </li>
            </router-link>
            <router-link to="/new">
                <li class="li ">
                    <i class="ivu-icon ivu-icon-ios-keypad"></i>
                    <span>新开账号</span>
                </li>
            </router-link>
            <router-link to="/arr">
                <li class="li">
                    <i class="ivu-icon ivu-icon-pizza"></i>
                    <span>账号管理</span>
                </li>
            </router-link>
            <router-link to="/dairy">
                <li class="li">
                    <i class="ivu-icon ivu-icon-social-yen"></i>
                    <span>账户日志</span>
                </li>
            </router-link>
            <router-link to="/open">
                <li class="li">
                    <i class="ivu-icon ivu-icon-lock-combination"></i>
                    <span>账号安全</span>
                </li>
            </router-link>
            <router-link to="/identify">
                <li class="li">
                    <i class="ivu-icon ivu-icon-android-contacts"></i>
                    <span>提交实名</span>
                </li>
            </router-link>
            <router-link to="/login">
                <li class="li">
                    <i class="ivu-icon ivu-icon-android-exit"></i>
                    <span>退出</span>
                </li>
            </router-link>
        </ul>
    </div>
</template>

<script>
    export default {
        name: "sidebar",
        data(){
            return {
                value2:'',
                model1: '',
                model2: '',
                modal1: false,
            }
        },
        methods:{

        }
    }
</script>

<style scoped>
    .ul{
        overflow: hidden;
        padding-left: 0;
        background:#4b6c8b;
    }
    .ul li{
        list-style: none;
        width: 100%;
        float: left;
        display: block;
        height: 40px;
        line-height: 40px;
        cursor: pointer;
        overflow: hidden;
    }
    .ul .li{
        padding-left: 14%;
        border-left: 2px solid transparent;
    }
    .ul .li:hover{
        background-color: #000;
        color: #00c1de !important;
    }
    .ul .li:hover span{
        color: #00c1de !important;
    }
    .ul .li:hover p{
        color: #00c1de !important;
    }
    .ul .li:hover i{
        color: #00c1de !important;
    }
    .cover{
        border-left: 2px solid #00c1de !important;
        background-color: #000;
    }
    .cover i{
        color: #00c1de !important;
    }
    .cover p, .cover span{
        color: #00c1de !important;
    }
    .ul .li_spe{
        padding-left: 11%;
        cursor: default !important;
        background: #1c4f6e;
        line-height: 30px !important;
        height: 30px !important;
    }
    .levelpic{
        color: #999 !important;
    }
    .ul .li_spe span{
        color: #999 !important;
    }
    .ul li span{
        color: #fff;
        font-size: 15px;
        float: left;
    }
    .ul li i{
        font-size: 19px;
        color: white;
        margin-right: 10px;
        float: left;
        margin-top: 9px;
    }
    .ul li p{
        color: white;
        font-size: 15px;
    }
    .ul li.light{
        border-left: 2px solid #00c1de;
        background-color: #000;
    }
    .ul li.light span{
        color: #00c1de !important;
    }
    .mid_title p{
        text-align: center;
        font-size: 14px;
    }
    .mid_title .name{
        text-align: center;
        color: white;
    }
    .mid_title .certify{
        width: 50px;
        display: block;
        margin: 5px auto;
        font-size: 14px;
        color: #fff;
        background-color: #2a0;
        text-align: center;
    }
    .mid_title .greed{
        font-size: 18px;
    }
    .range{
        display: inline-block;
        font-size: 14px;
        color: #fff;
        background-color: #00c1de;
        line-height: 28px;
        padding: 0 6px;
    }
    .forms{
        margin: 10px 0 10px 20px;
        background-color: #00c1de;
    }

</style>
